<template>
  <el-dialog
    v-loading="loading"
    :visible.sync="dialog"
    title="上传新增"
    width="500px"
    :close-on-click-modal="false"
    append-to-body
    @close="cancel"
  >
    <div>
      <span>采购ID：</span>
      <el-select v-model="buyerId" size="mini" style="width: 280px;">
        <el-option v-for="bid in buyerList" :key="bid" :label="bid" :value="bid" />
      </el-select>
    </div>
    <div style="margin-top:15px;">
      <el-upload
        ref="upload"
        :auto-upload="false"
        :on-exceed="handleExceed"
        :on-change="handleOnChange"
        :limit="1"
        :multiple="false"
        :file-list="fileList"
        action="#"
      >
        <el-button size="mini" round type="primary">点击选择上传Excel文件</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且大小不超过5MB</div>
      </el-upload>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" size="mini" round @click="cancel">取消</el-button>
      <el-button type="primary" size="mini" round @click="doSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Message } from 'element-ui'
import { getBuyerIdList } from '@/api/api'
import { uploadActivItemExcel } from '@/api/active-item'
import { showMessage } from '@/utils/activeItemUtil'

export default {
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      fileList: [],
      buyerId: '',
      buyerList: []
    }
  },
  created: function() {
    this.loadBuyer()
  },
  methods: {
    loadBuyer() {
      getBuyerIdList().then((res) => {
        this.buyerList = res
        if (res) {
          this.buyerId = res[0]
        }
      })
    },
    cancel() {
      this.dialog = false
      this.fileList = []
    },
    // 文件超出个数限制时的钩子
    handleExceed(files, fileList) {
      Message({
        message: '文件上传数量限制为1个。',
        type: 'warning',
        duration: 3 * 1000
      })
    },
    // 文件变动的钩子
    handleOnChange(file, fileList) {
      if (!(file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) {
        Message({
          message: '请上传格式为xlsx的文件。',
          type: 'warning',
          duration: 3 * 1000
        })
        fileList.pop()
      }
      var size = file.size / 1024 / 1024
      if (size > 5) {
        Message({
          message: '文件大小必须小于5M。',
          type: 'warning',
          duration: 3 * 1000
        })
        fileList.pop()
      } else {
        this.fileList = fileList
      }
    },
    // 确定按钮触发
    doSubmit() {
      if (this.fileList.length > 0) {
        this.loading = true
        const file = this.fileList[0]
        var formData = new FormData()
        formData.append('file', file.raw)
        formData.append('changeType', this.parent.changeType)
        formData.append('buyerId', this.buyerId)
        uploadActivItemExcel(formData, this.parent.changeType).then((res) => {
          this.parent.toQuery()
          showMessage(this, res)
          this.loading = false
          this.dialog = false
        }, error => {
          console.log(error)
          this.loading = false
          this.dialog = false
        })
        this.fileList.pop()
      } else {
        Message({
          message: '请选择上传Excel。',
          type: 'error',
          duration: 3 * 1000
        })
      }
    }
  }
}
</script>
